<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网抑郁音乐</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/indextCss-audio/audioplayer.css">
    <link rel="stylesheet" href="./css/indextCss-audio/default.css">
    <link rel="stylesheet" href="./css/indextCss-audio/reset.css">
    <link rel="stylesheet" href="./css/indextCss-audio/style.css">
    <link rel="stylesheet" href="./css/heijiao.css">
    <script src="./jquery.min/jquery.min.js"></script>
    <!-- <script src="./vue/vue.js"></script>
    <script src="./vue/vue router.js"></script> -->
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="./js/indext.js"></script>
    <!-- 音频播放器 -->
    <script src="./js/indexJS-audio/audioplayer.js"></script>
    <!-- 黑胶 -->
    <!-- <script src="../../音频/黑胶唱片/colorizer.js"></script> -->
</head>

<body>
    <nav class="navbar">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand wyyu-b fontcolor" href="#">网抑郁</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#" class="fontcolor ">珍藏悦语<span class="sr-only">(current)</span></a>
                    </li>
                    <li><a href="#" class="fontcolor">推声</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle fontcolor ptop" data-toggle="dropdown" role="button"
                            aria-haspopup="true" aria-expanded="false"><img src="./imgs/img (4).jpg" alt=""
                                class="nav-img"> Mr.king<span class="caret"></span></a>
                        <ul class="dropdown-menu qdao">
                            <li><a href="./qiandao.html">签到</a></li>
                            <li><a href="./qiandao.html">免费领黑卡会员</a></li>
                            <li><a href="#">兑换中心</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">有奖答题</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">疑惑解答</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control ssk" placeholder="薛之谦">
                    </div>
                    <button type="submit" class="btn btn-default sous">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" class="fontcolor">关于我们</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle fontcolor" data-toggle="dropdown" role="button"
                            aria-haspopup="true" aria-expanded="false">设置<span class="caret"></span></a>
                        <ul class="dropdown-menu qdao">
                            <li><a href="#">更换主题</a></li>
                            <li><a href="#">歌词</a></li>
                            <li><a href="#">下载设置</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="./denglu.html">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="main">
        <div class="left">
            <ul>
                <li class="click-one">精选歌单</li>
                <li class="click-two">每日推送</li>
                <li class="click-three">热门歌单</li>
                <li class="click-four">人气歌手</li>
                <li class="click-five">轻音乐</li>
                <li class="click-six">直播</li>
                <li class="click-seven">我的音乐</li>
                <li>本地歌曲</li>
                <li>听歌历史</li>
            </ul>
        </div>
        <div class="right-box">
            <!-- 主界面部分 -->
            <div class="right right-main">
                <!-- 黑胶唱片 -->
                <div class="audio">
                    <div class="echolizer"></div>
                    <div class="colorizer"></div>
                    <div class="disk"></div>
                    <img src="./imgs/img (1).jpg">
                </div>
                <!-- 音频播放器 -->
                <div id="wrapper">
                    <audio src="./4043169328.mp3" preload="auto" controls loop autoplay></audio>
                </div>
            </div>
            <!-- 精选歌单 -->
            <div class="right right-jxgd">
                <!-- 精选歌单 -->
                <!-- 顶部 -->
                <div class="jxgd-top">
                    <span class="gd-img">
                        <img src="./imgs/img (7).jpg" alt="">
                    </span>
                    <div class="jies">
                        <span class="gd-cur">
                            <span class="hg glyphicon glyphicon-tower"></span>
                            <span class="gd-tit">精品歌单</span>
                        </span>
                        <p>根据您的口味精选</p>
                    </div>
                </div>
                <!-- 主要内容部分 -->
                <div class="jxgd-main">
                    <div class="jxgd-main-skr">
                        <span class="jxgd-main-tit">
                            <ul>
                                <li>华语</li>
                                <li>欧美</li>
                                <li>流行</li>
                                <li>民谣</li>
                                <li>摇滚</li>
                                <li>原创</li>
                            </ul>
                        </span>
                        <div class="main-nav">
                            <ul>
                                <li class="li-cur">
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>原唱斯卡布罗集市</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (12).jpg" alt="">
                                    </div>
                                    <p>还有音乐来为你加温</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>昨日重现，好莱坞黄金时代</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (13).jpg" alt="">
                                    </div>
                                    <p>漫游于意识流氛围</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>腐朽而又好闻的资本主义气息</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (14).jpg" alt="">
                                    </div>
                                    <p>60～70秒超短歌曲一万首</p>
                                </li>
                            </ul>
                            <ul>
                                <li class="li-cur">
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>爆好听的英文歌</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (11).jpg" alt="">
                                    </div>
                                    <p>温柔治愈系纯音乐</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>请认领！节奏控专属英文歌单</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (10).jpg" alt="">
                                    </div>
                                    <p>世界最强Flow最炸说唱集合体</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>带上行李牵着你，开启惬意浪漫之旅</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (9).jpg" alt="">
                                    </div>
                                    <p>音乐是送给自己最好的礼物</p>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 每日推送 -->
            <div class="right right-mrts">
                <!-- 精选歌单 -->
                <!-- 顶部 -->
                <div class="jxgd-top">
                    <span class="gd-img">
                        <img src="./imgs/img (29).jpg" alt="">
                    </span>
                    <div class="jies">
                        <span class="gd-cur">
                            <span class="hg glyphicon glyphicon-tower"></span>
                            <span class="gd-tit">每日推送</span>
                        </span>
                        <p>只听你所听</p>
                    </div>
                </div>
                <!-- 主要内容部分 -->
                <div class="jxgd-main">
                    <div class="jxgd-main-skr">
                        <span class="jxgd-main-tit">
                            <ul>
                                <li>华语</li>
                                <li>欧美</li>
                                <li>流行</li>
                                <li>民谣</li>
                                <li>摇滚</li>
                                <li>原创</li>
                            </ul>
                        </span>
                        <div class="main-nav">
                            <ul>
                                <li class="li-cur">
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>原唱斯卡布罗集市</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (15).jpg" alt="">
                                    </div>
                                    <p>还有音乐来为你加温</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>昨日重现，好莱坞黄金时代</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (16).jpg" alt="">
                                    </div>
                                    <p>漫游于意识流氛围</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>腐朽而又好闻的资本主义气息</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (20).jpg" alt="">
                                    </div>
                                    <p>60～70秒超短歌曲一万首</p>
                                </li>
                            </ul>
                            <ul>
                                <li class="li-cur">
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>爆好听的英文歌</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (17).jpg" alt="">
                                    </div>
                                    <p>温柔治愈系纯音乐</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>请认领！节奏控专属英文歌单</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (18).jpg" alt="">
                                    </div>
                                    <p>世界最强Flow最炸说唱集合体</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>带上行李牵着你，开启惬意浪漫之旅</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (19).jpg" alt="">
                                    </div>
                                    <p>音乐是送给自己最好的礼物</p>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 热门歌单 -->
            <div class="right right-rmgd">
                <!-- 精选歌单 -->
                <!-- 顶部 -->
                <div class="jxgd-top">
                    <span class="gd-img">
                        <img src="./imgs/img (30).jpg" alt="">
                    </span>
                    <div class="jies">
                        <span class="gd-cur">
                            <span class="hg glyphicon glyphicon-tower"></span>
                            <span class="gd-tit">热门歌单</span>
                        </span>
                        <p>选择适合你的音乐</p>
                    </div>
                </div>
                <!-- 主要内容部分 -->
                <div class="jxgd-main">
                    <div class="jxgd-main-skr">
                        <span class="jxgd-main-tit">
                            <ul>
                                <li>华语</li>
                                <li>欧美</li>
                                <li>流行</li>
                                <li>民谣</li>
                                <li>摇滚</li>
                                <li>原创</li>
                            </ul>
                        </span>
                        <div class="main-nav">
                            <ul>
                                <li class="li-cur">
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>原唱斯卡布罗集市</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (21).jpg" alt="">
                                    </div>
                                    <p>还有音乐来为你加温</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>昨日重现，好莱坞黄金时代</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (22).jpg" alt="">
                                    </div>
                                    <p>漫游于意识流氛围</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>腐朽而又好闻的资本主义气息</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (23).jpg" alt="">
                                    </div>
                                    <p>60～70秒超短歌曲一万首</p>
                                </li>
                            </ul>
                            <ul>
                                <li class="li-cur">
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>爆好听的英文歌</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (24).jpg" alt="">
                                    </div>
                                    <p>温柔治愈系纯音乐</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>请认领！节奏控专属英文歌单</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (25).jpg" alt="">
                                    </div>
                                    <p>世界最强Flow最炸说唱集合体</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>带上行李牵着你，开启惬意浪漫之旅</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (26).jpg" alt="">
                                    </div>
                                    <p>音乐是送给自己最好的礼物</p>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 人气歌手 -->
            <div class="right right-rqgs">
                <div class="rqgs-ghv">
                    <div class="rqgs-top">
                        <div class="rqgstop-megs">
                            <p>你喜欢的歌手应有尽有</p>
                        </div>
                    </div>
                    <div class="rqgs-main">
                        <ul class="rqgs-main-fenlei">
                            <li>语种：</li>
                            <li>全部</li>
                            <li>华语</li>
                            <li>欧美</li>
                            <li>日本</li>
                            <li>韩国</li>
                        </ul>
                        <ul class="rqgs-main-fenlei">
                            <li>分类：</li>
                            <li>全部</li>
                            <li>男歌手</li>
                            <li>女歌手</li>
                            <li>乐队组合</li>

                        </ul>
                        <div class="rqgs-gundt">
                            <ul class="rqgs-main-fenlei rqgs-scroll">
                                <li>筛选：</li>
                                <li>热门</li>
                                <li>A</li>
                                <li>B</li>
                                <li>C</li>
                                <li>D</li>
                                <li>E</li>
                                <li>F</li>
                                <li>G</li>
                                <li>H</li>
                                <li>I</li>
                                <li>J</li>
                                <li>K</li>
                                <li>L</li>
                                <li>M</li>
                                <li>N</li>
                                <li>O</li>
                                <li>P</li>
                                <li>Q</li>
                                <li>R</li>
                                <li>S</li>
                                <li>T</li>
                                <li>U</li>
                                <li>V</li>
                                <li>W</li>
                                <li>X</li>
                                <li>Y</li>
                                <li>Z</li>
                                <li>#</li>

                            </ul>
                        </div>
                        <div class="gesho-box">
                            <div class="gesho">
                                <li>
                                    <div class="gesho-skr"><img src="./imgs/img (40).jpg" alt=""></div>
                                    <p>陈奕迅</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (41).jpg" alt="">
                                    <p>周杰伦</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (44).jpg" alt="">
                                    <p>林俊杰</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (43).jpg" alt="">
                                    <p>刘德华</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (45).jpg" alt="">
                                    <p>薛之谦</p>
                                </li>
                            </div>
                            <div class="gesho">
                                <li>
                                    <img src="./imgs/img (42).jpg" alt="">
                                    <p>许嵩</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (46).jpg" alt="">
                                    <p>毛不易</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (47).jpg" alt="">
                                    <p>Justin Bieber</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (48).jpg" alt="">
                                    <p>Taylor Swift</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (49).jpg" alt="">
                                    <p>Alan Walker</p>
                                </li>
                            </div>
                            <div class="gesho">
                                <li>
                                    <img src="./imgs/img (51).jpg" alt="">
                                    <p>iu</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (52).jpg" alt="">
                                    <p>BLACKPINK</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (50).jpg" alt="">
                                    <p>华晨宇</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (53).jpg" alt="">
                                    <p>泫雅</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (23).jpg" alt="">
                                    <p>陈奕迅</p>
                                </li>
                            </div>
                            <div class="gesho">
                                <li>
                                    <img src="./imgs/img (56).jpg" alt="">
                                    <p>王力宏</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (55).jpg" alt="">
                                    <p>王菲</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (54).jpg" alt="">
                                    <p>张杰</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (23).jpg" alt="">
                                    <p>陈奕迅</p>
                                </li>
                                <li>
                                    <img src="./imgs/img (23).jpg" alt="">
                                    <p>陈奕迅</p>
                                </li>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 轻音乐 -->
            <div class="right right-qyy">
                <!-- 精选歌单 -->
                <!-- 顶部 -->
                <div class="jxgd-top">
                    <span class="gd-img">
                        <img src="./imgs/img (36).jpg" alt="">
                    </span>
                    <div class="jies">
                        <span class="gd-cur">
                            <span class="hg glyphicon glyphicon-tower"></span>
                            <span class="gd-tit">轻音乐</span>
                        </span>
                        <p>忙一天了 来放松放松</p>
                    </div>
                </div>
                <!-- 主要内容部分 -->
                <div class="jxgd-main">
                    <div class="jxgd-main-skr">
                        <span class="jxgd-main-tit">
                            <ul>
                                <li>华语</li>
                                <li>欧美</li>
                                <li>流行</li>
                                <li>民谣</li>
                                <li>摇滚</li>
                                <li>原创</li>
                            </ul>
                        </span>
                        <div class="main-nav">
                            <ul>
                                <li class="li-cur">
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>原唱斯卡布罗集市</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (35).jpg" alt="">
                                    </div>
                                    <p>还有音乐来为你加温</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>昨日重现，好莱坞黄金时代</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (34).jpg" alt="">
                                    </div>
                                    <p>漫游于意识流氛围</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>腐朽而又好闻的资本主义气息</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (33).jpg" alt="">
                                    </div>
                                    <p>60～70秒超短歌曲一万首</p>
                                </li>
                            </ul>
                            <ul>
                                <li class="li-cur">
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>爆好听的英文歌</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (32).jpg" alt="">
                                    </div>
                                    <p>温柔治愈系纯音乐</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>请认领！节奏控专属英文歌单</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (24).jpg" alt="">
                                    </div>
                                    <p>世界最强Flow最炸说唱集合体</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>带上行李牵着你，开启惬意浪漫之旅</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <div class="imgsz-tu-sj"></div>
                                            </div>
                                        </div>
                                        <img src="./imgs/img (9).jpg" alt="">
                                    </div>
                                    <p>音乐是送给自己最好的礼物</p>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 直播 -->
            <div class="right right-zb">
                <!-- 精选歌单 -->
                <!-- 顶部 -->
                <div class="jxgd-top">
                    <span class="gd-img">
                        <img src="./imgs/img (37).jpg" alt="">
                    </span>
                    <div class="jies">
                        <span class="gd-cur">
                            <span class="hg glyphicon glyphicon-tower"></span>
                            <span class="gd-tit">直播天地</span>
                        </span>
                        <p>快来跟主播互动吧</p>
                    </div>
                </div>
                <!-- 主要内容部分 -->
                <div class="jxgd-main">
                    <div class="jxgd-main-skr">
                        <span class="jxgd-main-tit">
                            <ul>
                                <li>华语</li>
                                <li>欧美</li>
                                <li>流行</li>
                                <li>民谣</li>
                                <li>摇滚</li>
                                <li>原创</li>
                            </ul>
                        </span>
                        <div class="main-nav">
                            <ul>
                                <li class="li-cur">
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>原唱斯卡布罗集市</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <img src="./imgs/img (38).gif" alt="">
                                            </div>
                                        </div>
                                        <img src="./imgs/img (12).jpg" alt="">
                                    </div>
                                    <p>还有音乐来为你加温</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>昨日重现，好莱坞黄金时代</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <img src="./imgs/img (38).gif" alt="">
                                            </div>
                                        </div>
                                        <img src="./imgs/img (13).jpg" alt="">
                                    </div>
                                    <p>漫游于意识流氛围</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>腐朽而又好闻的资本主义气息</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <img src="./imgs/img (38).gif" alt="">
                                            </div>
                                        </div>
                                        <img src="./imgs/img (14).jpg" alt="">
                                    </div>
                                    <p>60～70秒超短歌曲一万首</p>
                                </li>
                            </ul>
                            <ul>
                                <li class="li-cur">
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>爆好听的英文歌</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <img src="./imgs/img (38).gif" alt="">
                                            </div>
                                        </div>
                                        <img src="./imgs/img (11).jpg" alt="">
                                    </div>
                                    <p>温柔治愈系纯音乐</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>请认领！节奏控专属英文歌单</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <img src="./imgs/img (38).gif" alt="">
                                            </div>
                                        </div>
                                        <img src="./imgs/img (10).jpg" alt="">
                                    </div>
                                    <p>世界最强Flow最炸说唱集合体</p>
                                </li>
                                <li>
                                    <div class="imgsz">
                                        <div class="imgsz-smk">
                                            <div class="imgsz-smk-p">
                                                <p>带上行李牵着你，开启惬意浪漫之旅</p>
                                            </div>
                                        </div>
                                        <div class="imgsz-tu">
                                            <div class="imgsz-tu-pos">
                                                <img src="./imgs/img (38).gif" alt="">
                                            </div>
                                        </div>
                                        <img src="./imgs/img (9).jpg" alt="">
                                    </div>
                                    <p>音乐是送给自己最好的礼物</p>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 我的音乐 -->
            <div class="right right-mymusic">
                <div class="mymusic-top">
                    <div class="mymusictop-left">
                        <img src="./imgs/img (39).jpg" alt="">
                    </div>
                    <div class="mymusictop-right">
                        <h3>我的音乐</h3>
                        <p>翱翔于音乐的天空，酣畅淋漓!</p>
                    </div>
                    <div class="mymusictop-rigrig">
                        <div class="rigrig-top">
                            <p>
                                <span></span>一键播放
                            </p>
                            <p>
                                <span></span>分享
                            </p>
                            <p>
                                <span></span>一键下载
                            </p>
                        </div>
                        <div class="rigrig-bottom">
                            <span>收藏: 232</span>
                            <span>歌曲: 32</span>
                            <span>播放: 435</span>
                        </div>
                    </div>
                </div>
                <div class="mymusic-main">
                    <div class="mymusic-main-tit">
                        <p>音乐标题</p>
                        <p>歌手</p>
                        <p>专辑</p>
                        <p>时长</p>
                    </div>
                    <ul class="mymusic-main-gqu">
                        <li>
                            <span>01</span>
                            <span class="glyphicon glyphicon-download-alt"></span>
                            <span> Old Town Road</span>
                            <span></span>
                            <span>Lil Nas X</span>
                            <span>Old Town Road</span>
                            <span>02.43</span>
                        </li>
                        <li>
                            <span>02</span>
                            <span class="glyphicon glyphicon-download-alt"></span>
                            <span> Sketch Plane</span>
                            <span></span>
                            <span>Cam Kelley</span>
                            <span>Sincere Sarcasm</span>
                            <span>03.45</span>
                        </li>
                        <li>
                            <span>03</span>
                            <span class="glyphicon glyphicon-download-alt"></span>
                            <span> Unstoppable</span>
                            <span></span>
                            <span>Sia</span>
                            <span>This Is Acting</span>
                            <span>03.37</span>
                        </li>
                        <li>
                            <span>04</span>
                            <span class="glyphicon glyphicon-download-alt"></span>
                            <span> In the End</span>
                            <span></span>
                            <span>Tommee Profit</span>
                            <span>IN THE END</span>
                            <span>03.54</span>
                        </li>
                        <li>
                            <span>05</span>
                            <span class="glyphicon glyphicon-download-alt"></span>
                            <span> MELANCHOLY</span>
                            <span></span>
                            <span>White Cherry</span>
                            <span>MELANCHOLY</span>
                            <span>02.08</span>
                        </li>
                        <li>
                            <span>06</span>
                            <span class="glyphicon glyphicon-download-alt"></span>
                            <span> Sade Tterne Qdq</span>
                            <span></span>
                            <span>Cters Ksa Slie</span>
                            <span>Oluetr Town Road</span>
                            <span>03.16</span>
                        </li>
                        <li>
                            <span>07</span>
                            <span class="glyphicon glyphicon-download-alt"></span>
                            <span> Dusk Till Dawn</span>
                            <span></span>
                            <span>ZAYN / Sia</span>
                            <span>Dusk Till Dawn</span>
                            <span>04.12</span>
                        </li>
                        <li>
                            <span>08</span>
                            <span class="glyphicon glyphicon-download-alt"></span>
                            <span> Kina-Can We Kiss Forever</span>
                            <span></span>
                            <span>CHENYI / LAN7</span>
                            <span>CHENYI / LAN7</span>
                            <span>03.51</span>
                        </li>
                        <li>
                            <span>09</span>
                            <span class="glyphicon glyphicon-download-alt"></span>
                            <span> Blame</span>
                            <span></span>
                            <span>Calvin Harris / Joh</span>
                            <span>Blame</span>
                            <span>03.37</span>
                        </li>
                        <li>
                            <span>10</span>
                            <span class="glyphicon glyphicon-download-alt"></span>
                            <span> You're Beautiful</span>
                            <span></span>
                            <span>James Blunt</span>
                            <span>So Beautiful 1</span>
                            <span>03.23</span>
                        </li>
                        <li>
                            <span>11</span>
                            <span class="glyphicon glyphicon-download-alt"></span>
                            <span> Wild</span>
                            <span></span>
                            <span>Monogem</span>
                            <span>Wild</span>
                            <span>04.23</span>
                        </li>

                    </ul>
                </div>
            </div>
            <!-- 评论部分 -->
            <div class="right right-plun">
                <div class="right-plun-box">
                    <div class="right-plun-top">
                        <div class="plun-top-left">
                            <div class="plun-left-msk"></div>
                            <img src="./imgs/img (24).jpg" alt="">
                        </div>
                        <div class="plun-top-right">
                            <h4>Yesterday Once More</h4>
                            <p>
                                <span>专辑：</span>
                                <span>不朽的音乐（人生最难忘的歌）</span>
                                <span>歌手：Carpenter</span>

                            </p>
                        </div>
                        <div class="plun-top-mrig">
                            返回
                        </div>
                    </div>
                    <div class="plun-textarea">
                        <textarea name="" id="" cols="80" rows="4"></textarea>
                        <div class="pl">评论</div>
                    </div>
                    <div class="plun-main">
                        <p>精彩评论</p>
                        <ul>
                            <li>
                                <span class="plun-main-img">
                                    <img src="./imgs/img (32).jpg" alt="">
                                </span>
                                <p>这也太好听了吧！</p>
                                <div class="co">
                                    <span>2020-10-12发布</span>
                                    <span class="glyphicon glyphicon-thumbs-up add"></span>
                                    <span class="zan">点赞：<em>122</em></span>
                                    <span class="glyphicon glyphicon-thumbs-down jian"></span>
                                    <span class="cai">踩：<em>233</em></span>
                                </div>
                            </li>
                            <li>
                                <span class="plun-main-img">
                                    <img src="./imgs/img (32).jpg" alt="">
                                </span>
                                <p>什么叫经典，就是不论过去多少年，社会怎样变迁，价值观如何改变。只要听到这首歌你就会共鸣，在你甚至都不知道这首歌任何背景与故事的前提下</p>
                                <div class="co">
                                    <span>2020-10-12发布</span>
                                    <span class="glyphicon glyphicon-thumbs-up add"></span>
                                    <span class="zan">点赞：<em>122</em></span>
                                    <span class="glyphicon glyphicon-thumbs-down jian"></span>
                                    <span class="cai">踩：<em>233</em></span>
                                </div>
                            </li>
                            <li>
                                <span class="plun-main-img">
                                    <img src="./imgs/img (32).jpg" alt="">
                                </span>
                                <p>每次听都浑身起鸡皮疙瘩，头皮发麻，鼻子发酸，音乐是不分国界的，好的音乐不仅会让人感动产生共鸣，还会让人重新爱上这个不美好的世界，并从心底感恩。</p>
                                <div class="co">
                                    <span>2020-10-12发布</span>
                                    <span class="glyphicon glyphicon-thumbs-up add"></span>
                                    <span class="zan">点赞：<em>122</em></span>
                                    <span class="glyphicon glyphicon-thumbs-down jian"></span>
                                    <span class="cai">踩：<em>233</em></span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>